<template>
  <page-meta :root-font-size="rootFontSize() + 'px'"></page-meta>

  <view class="page-container">
    <customHeader title="奶酪口语体验营" />

    <view class="page-content" :style="{ top: height }">
      <image class="content-banner" :src="`${env.prefixUrl}${courseInfo.banner}`" />
      <view class="content-label">
        <image class="label-star" src="https://rwstatic.tentons.cn/web/Lesson/images/two-star-icon.png" />
        <text>{{ courseInfo.title }}</text>
      </view>
      <text class="content-desc">
        开课时间：<text class="time">{{ courseInfo.start_day }}</text>
      </text>
      <image class="content-qrcode" show-menu-by-longpress :src="courseInfo.teacher" />
      <text class="content-tips">长按识别二维码添加老师</text>
      <text class="content-tips">开课后老师将第一时间告知你~</text>
    </view>
  </view>

  <CwCommon />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { rootFontSize } from "@/utils/util";
import { onLoad } from "@dcloudio/uni-app";
import API from "@/api";
import env from "@/config/env";

interface INoCourse {
  banner: string;
  start_day: string;
  teacher: string;
  title: string;
}

const height = ref(getApp().globalData!.pageTop);
const courseInfo = ref<INoCourse>({
  banner: "",
  start_day: "",
  teacher: "",
  title: "",
});

onLoad(async (option: any) => {
  API.notStart({ course_id: option.course_id }).then(res => {
    courseInfo.value = res as INoCourse;
  })
})
</script>

<style scoped lang="scss">
.page-container {
  background-color: #F9EEDC;

  .page-content {
    background-color: #F9EEDC;

    .content-banner {
      width: 33.5rem;
      height: 18rem;
      margin: 2rem 50% 4rem;
      transform: translateX(-50%);
      border-radius: 1.2rem;
    }

    .content-label {
      width: 100%;
      margin-bottom: 1.1rem;
      font-family: xiaolai;
      font-size: 1.8rem;
      color: $uni-text-color;
      text-align: center;

      .label-star {
        width: 2.094rem;
        height: 2.53rem;
        margin-right: 0.17rem;
      }
    }

    .content-desc {
      display: block;
      margin-bottom: 3rem;
      font-family: xiaolai;
      font-size: 1.8rem;
      color: #A87F71;
      text-align: center;

      .time {
        color: #E8A71B;
      }
    }

    .content-qrcode {
      width: 16.5rem;
      height: 16.5rem;
      margin-bottom: 1.4rem;
      margin-left: 50%;
      transform: translateX(-50%);
      border-radius: 1.2rem;
    }

    .content-tips {
      display: block;
      font-family: xiaolai;
      font-size: 1.4rem;
      line-height: 2rem;
      color: $uni-text-color;
      text-align: center;
    }
  }
}
</style>